<template>
    <div class="ex-detail">
        <div class="em-title">
            <p>Press contacts</p>
        </div>
        <!-- <Transition name="slide-fade" @after-leave="onAfterLeave"> -->
        <div class="ep-content">
            <div class="epc-card">
                <div class="epc-left">
                    <div class="epc-left-img"></div>
                    <div class="epc-left-name">admin</div>
                    <div class="epc-left-position">Department Position</div>
                </div>
                <div class="epc-mid">
                </div>
                <div class="epc-right">
                    <div class="epc-right-title">Contact information</div>
                    <div class="epc-right-line">
                        <img src="/images/icon/phone.png" />
                        <p>+ 86 1500 0000 000</p>
                    </div>
                    <div class="epc-right-line">
                        <img src="/images/icon/fax.png" />
                        <p>+ 86 1500 0000 000</p>
                    </div>
                    <div class="epc-right-line">
                        <img src="/images/icon/email.png" />
                        <p>Send E-Mail</p>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.ex-detail {
    position: relative;
    padding: 0px 0px;
    background: #fff;
    width: 1920px;
    height: 680px;
    padding-top: 100px;

    .em-title {
        // margin-top: 100px;
        font-size: 56px;
        color: #000;
        font-weight: 600;
        // margin-bottom: 112px;
        width: 100%;
        text-align: center;
    }

    .ep-content {
        // width: 1720px;
        // margin-bottom: 10px;
        padding: 100px 455px;

        .epc-card {
            overflow: hidden;
            display: inline-flex;
            height: 280px;

            .epc-left {
                width: 350px;
                // padding: 0 160px;
                padding-left: 155px;

                .epc-left-img {
                    width: 185px;
                    height: 185px;
                    background: #EAEAEB;
                    border-radius: 50%;
                    overflow: hidden;
                }

                .epc-left-name {
                    text-align: center;
                    width: 185px;
                    height: 30px;
                    margin-top: 25px;
                    font-size: 24px;
                    font-weight: 700;
                    color: #30363A;
                }

                .epc-left-position {
                    text-align: center;
                    width: 185px;
                    height: 30px;
                    margin-top: 20px;
                    font-size: 16;
                    color: #30363A;
                }

            }

            .epc-mid {
                width: 0px;
                border-right: 1px solid rgba(0, 0, 0, 0.15);
            }

            .epc-right {
                width: 505px;
                margin-left: 160px;

                .epc-right-title{
                    height: 60px;
                    line-height: 60px;
                    font-size: 22px;
                    font-weight: 700;
                    color: #30363A;
                    margin-top: 20px;
                }

                .epc-right-line {
                    width: 360px;
                    height: 56px;
                    padding: 8px 0;
                    display: inline-flex;

                    img {
                        width: 40px;
                        height: 40px;
                        border: 2px dashed rgba(0, 0, 0, 0.2);
                    }

                    p {
                        height: 40px;
                        margin-left: 16px;
                        line-height: 40px;
                        font-size: 20px;
                    }
                }
            }

        }

        .epc-card:hover .epc-img img {
            transform: scale(1.05);
        }

    }


}

</style>
